import React from 'react'
import { changeNav,modifyUserinfo,modifyServicer } from '../../actions'
import { connect } from 'react-redux'
import { List,WhiteSpace,WingBlank,Button,InputItem } from 'antd-mobile'
import { createForm } from 'rc-form'

const Item = List.Item
const Brief = Item.Brief

class ModifyDetail extends React.Component {

	constructor(props){
		super(props)
		this.state = {
			showtitle:"",
			placeholder:"",
			crtvalue:""
		}
	}

	componentDidMount(){

		switch( this.props.params.type ){
			case "mobile":
				this.props.tochangeNav({title:"修改手机号"})
				this.setState({
					showtitle:"手机号",
					placeholder:"请输入你的手机号"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.userInfo.mobile
			    })	
				break
			case "name":
				this.props.tochangeNav({title:"修改姓名"})		
				this.setState({
					showtitle:"姓名",
					placeholder:"请输入你的姓名"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.userInfo.fullName
			    })
				break
			case "password":
				this.props.tochangeNav({title:"修改密码"})		
				this.setState({
					showtitle:"密码",
					placeholder:"请输入你的密码"
				})
				// this.props.form.setFieldsValue({
			 //      crtvalue: this.props.userInfo.password
			 //    })
				break
			case "companyname":
				this.props.tochangeNav({title:"修改公司名称"})		
				this.setState({
					showtitle:"公司名称",
					placeholder:"请输入你的公司名称"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.servicerInfo.servicerName
			    })
				break
			case "address":
				this.props.tochangeNav({title:"修改公司地址"})		
				this.setState({
					showtitle:"公司地址",
					placeholder:"请输入你的公司地址"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.servicerInfo.address
			    })
				break
			case "contactname":
				this.props.tochangeNav({title:"修改公司联系人"})		
				this.setState({
					showtitle:"联系人",
					placeholder:"请输入你的公司联系人"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.servicerInfo.fullname
			    })
				break
			case "servicermobi":
				this.props.tochangeNav({title:"修改联系人电话"})		
				this.setState({
					showtitle:"电话",
					placeholder:"请输入你的公司联系人电话"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.servicerInfo.mobile
			    })
				break
			case "serviceremail":
				this.props.tochangeNav({title:"修改公司联系人邮箱"})		
				this.setState({
					showtitle:"邮箱",
					placeholder:"请输入你公司的联系人邮箱"
				})
				this.props.form.setFieldsValue({
			      crtvalue: this.props.servicerInfo.email
			    })
				break
		}

	    
	}

	render(){
		const { showtitle,placeholder,crtvalue } = this.state
		const { getFieldProps,validateFields } = this.props.form
		const { modifyUserinfo,userInfo,servicerInfo,modifyServicer } = this.props
		return(
			<div>
				<List renderHeader={() => ''}>
					
					<InputItem 
						{...getFieldProps('crtvalue',{ rules: [{required: true}] })}
						placeholder={ placeholder }
					>{ showtitle }</InputItem>
					{
						(()=>{
							if( this.props.params.type === "password" ){
								return <InputItem 
											{...getFieldProps('confirmpsw',{ rules: [{required: true}] })}
											placeholder={ placeholder }
									    >确认密码</InputItem>
							}
						})()
					}

				</List>
				<WhiteSpace size="lg" />
				<WingBlank>
					<Button className="btn" type="primary"
						onClick={
							() => {
								this.props.form.validateFields(( error,value )=>{
					              if( error ){
					                // console.log( error )
					                return
					              }
					              // console.log( value )

					              let sendobj = {
								  }

								  let servicerSendobj = {
								  	// servicerCode:servicerInfo.servicerCode
								  }

								  switch( this.props.params.type ){
									case "mobile":
										sendobj.mobile = value.crtvalue
										// modifyUserinfo( userInfo.userName,sendobj)
										break
									case "name":
										sendobj.fullName = value.crtvalue
										modifyUserinfo( userInfo.userName,sendobj)
										break
									case "password":
										sendobj.password = value.crtvalue
										sendobj.confirmPassword = value.confirmpsw
										modifyUserinfo( userInfo.userName,sendobj)
										break
									case "companyname":
										servicerSendobj.servicerName = value.crtvalue
										modifyServicer( servicerInfo.servicerCode,servicerSendobj )
										break
									case "address":
										servicerSendobj.address = value.crtvalue
										modifyServicer( servicerInfo.servicerCode,servicerSendobj )
										break
									case "contactname":
										servicerSendobj.fullname = value.crtvalue
										modifyServicer( servicerInfo.servicerCode,servicerSendobj )
										break
									case "servicermobi":
										servicerSendobj.mobile = value.crtvalue
										modifyServicer( servicerInfo.servicerCode,servicerSendobj )
										break
									case "serviceremail":
										servicerSendobj.email = value.crtvalue
										modifyServicer( servicerInfo.servicerCode,servicerSendobj )
										break
								  }
								   
					            })
							}
						}
					>保存</Button>
				</WingBlank>
			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
	 userInfo:state.userInfo,
	 servicerInfo:state.servicerInfo
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	modifyUserinfo:( username,data ) => dispatch( modifyUserinfo( username,data ) ),
	modifyServicer:( code,data ) => dispatch( modifyServicer( code,data ) )
})

const FormWrapper = createForm()(connect( mapStateToProps,mapDispatchToProps )( ModifyDetail ))
export default FormWrapper